<template>
  <div class="email-detail-root">
    <!-- @closed 窗口关闭时结束时的回调   -->
    <el-dialog v-model="dialogStatus" title="查看邮件详细信息" width="800"
               @closed="closeDialog"
               style="text-align: center;font-weight:bold;"
    >
    <div class="email-table">
      <div class="email-row">
        <div class="title">邮件主题</div>
        <div class="content">{{emailDetailData.topic}}</div>
      </div>
      <div class="email-row">
        <div class="title">收件人</div>
        <div class="content">{{emailDetailData.members_name}}</div>
      </div>
      <div class="email-row">
        <div class="title">抄送人</div>
        <div class="content">{{emailDetailData.copy_members_name}}</div>
      </div>
      <div class="email-row">
        <div class="title">邮件内容</div>
        <div class="content">{{emailDetailData.content}}</div>
      </div>
      <div class="email-row">
        <div class="title">发送时间</div>
        <div class="content">{{emailDetailData.occurtime}}</div>
      </div>
    </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'

const tableData =[]

const props = defineProps({
  detailEmailDialogFormVisible: Boolean,
  emailDetailData:Object,
})
let dialogStatus = ref(props.detailEmailDialogFormVisible)
let emailDetailData = ref(props.emailDetailData)
const formLabelWidth = '70px'

const emit = defineEmits(['closeDetailNoticeFormVisible'])
const closeDialog = ()=>{
  emit('closeDetailNoticeFormVisible', false)
}

// 监听父组件传递的 `dialogFormVisible` 变化
watch(() => [props.detailEmailDialogFormVisible,props.emailDetailData], ([newDialogFormVisible, newDetailData]) => {
  // 如果需要在变化时执行一些逻辑，可以在这里添加，这里只把关闭的值传进去，相当于状态值转一圈来控制对话框的打开和关闭
  dialogStatus.value = newDialogFormVisible;
  emailDetailData.value = newDetailData;
});

</script>

<style scoped lang="less">
.email-detail-root{
  .email-table{
    border:2px solid #00c9bb;
    border-radius: 10px;
    margin: 30px;
    .email-row{
      border-bottom: 1px solid #00c9bb;
      display:flex;
      padding-top:20px;
      padding-left:20px;
      padding-bottom: 20px;
      .title{
        flex: 1;
        border-right: 2px solid #00c9bb;
        font-weight: bold;
        font-size: 16px;
        text-align: right;
        padding-right: 20px;
      }
      .content{
        flex: 9;
        text-align: left;
        padding-left: 20px;

      }
    }
    .email-row:last-child{
      border-bottom: none;
    }
  }
}
</style>